Passed
Push — feature/preseason-2020-2021 ( 0f5b63 )
by Kevin Van
05:48 queued 12s
created

JeugdPage.render   B

Complexity

Conditions 1

Size

Total Lines 62
Code Lines 59

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 59
dl 0
loc 62
c 0
b 0
f 0
rs 8.3417
cc 1

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
import React, { Component } from "react"
2
import { graphql, Link } from "gatsby"
3
4
import Layout from "../layouts/index"
5
6
import SEO from "../components/seo"
7
import { CardImage } from "../components/cards"
8
import MatchesOverview from "../components/matches-overview"
9
10
class JeugdPage extends Component {
11
  render() {
12
    const data = this.props.data
13
14
    return (
15
      <Layout>
16
        <SEO
17
          lang="nl-BE"
18
          title="Jeugdwerking"
19
          description="Jeugdwerking van KCVV Elewijt"
20
          path={this.props.location.pathname}
21
        />
22
23
        <section className="grid-container site-content">
24
          <div className="grid-x grid-margin-x">
25
            <section className={"cell large-12 youth_teams__overview"}>
26
              <Link to="/jeugd/u15/" className={"btn btn--arrow"}>
27
                U15
28
              </Link>
29
              <Link to="/jeugd/u13/" className={"btn btn--arrow"}>
30
                U13
31
              </Link>
32
              <Link to="/jeugd/u12/" className={"btn btn--arrow"}>
33
                U12
34
              </Link>
35
              <Link to="/jeugd/u11/" className={"btn btn--arrow"}>
36
                U11
37
              </Link>
38
              <Link to="/jeugd/u10/" className={"btn btn--arrow"}>
39
                U10
40
              </Link>
41
              <Link to="/jeugd/u9/" className={"btn btn--arrow"}>
42
                U9
43
              </Link>
44
              <Link to="/jeugd/u8/" className={"btn btn--arrow"}>
45
                U8
46
              </Link>
47
              <Link to="/jeugd/u7/" className={"btn btn--arrow"}>
48
                U7
49
              </Link>
50
              <Link to="/jeugd/u6/" className={"btn btn--arrow"}>
51
                U6
52
              </Link>
53
            </section>
54
            <section className={"cell large-12 featured-article"}>
55
              <CardImage
56
                title="Leerplannen voor de jeugdwerking"
57
                localFile={data.leerplan}
58
                link="/news/2019-08-08-leerplan-kcvv-elewijt-jeugd"
59
                metadata={false}
60
              />
61
            </section>
62
            <section className={"cell large-12 featured-article"}>
63
              <h2 style={{ marginTop: `${2}rem` }}>Volgende wedstrijden</h2>
64
              <MatchesOverview
65
                season="1920"
66
                regnumber="00055"
67
                exclude="['2A', '4D']"
68
              />
69
            </section>
70
          </div>
71
        </section>
72
      </Layout>
73
    )
74
  }
75
}
76
77
export const pageQuery = graphql`
78
  query {
79
    leerplan: file(name: { eq: "leerplan_header" }) {
80
      ...KCVVFluid960
81
    }
82
  }
83
`
84
85
export default JeugdPage
86